<template>
    <a-layout-header class="header bg-alpha">
        <router-link to="/index">
            <div class="logo">{{ props.logo }}</div></router-link
        >
        <a-menu
            v-model:selectedKeys="selectedKeys1"
            mode="horizontal "
            :style="{
                lineHeight: '18px',
                justifyContent: 'end',
                padding: '0 80px'
            }"
        >
            <a-menu-item v-for="item in props.headers" :key="item.to">
                <router-link :to="item.to">
                    <div class="navbox">
                        <p>{{ item.text }}</p>
                    </div>
                </router-link>
            </a-menu-item>
        </a-menu>
    </a-layout-header>
</template>

<script lang="ts" setup>
import { ref } from 'vue';

const props = withDefaults(
    defineProps<{
        logo: string;
        headers: Header[];
    }>(),
    {
        logo: '报修平台',
        headers: () => [
            { to: '/index', text: '首页' },
            { to: '/repair', text: '报修' },
            { to: '/repairList', text: '报修列表' }
        ]
    }
);

console.log('======= headers =======\n', props.headers);

const selectedKeys1 = ref<string[]>(['2']);
</script>

<style lang="scss" scoped>
.header {
    width: 100%;
    height: 80px;
    overflow: hidden;
    padding-inline: 20px;
    display: flex;
    justify-content: start;
    align-items: center;

    .logo {
        width: 150px;
        height: 50px;
        line-height: 50px;
        margin-left: 80px;

        border: 3px solid $text-primary;
        border-radius: 10px;
        color: $text-primary;
        font-weight: 600;
        text-align: center;
    }

    :deep(.ant-menu) {
        flex: 1;
        display: flex;
        /* 使用Flex布局 */
        justify-content: start;
        /* 使子元素在主轴上均匀分布，但最后一个li将会通过特殊的处理靠右 */
        align-items: center;
        /* 保持垂直居中，如果需要 */
        background-color: $bg-color-alpha;
        height: 80px;
        color: $text-color-white;
        font-weight: $font-weight-600;
    }
    :deep(.ant-menu-item a:hover) {
        color: $text-primary;
    }

    // 菜单选中样式
    :deep(.ant-menu-light.ant-menu-horizontal > .ant-menu-item-selected) {
        color: $text-primary !important;
    }
    :deep(.ant-menu-item-selected::after) {
        border-bottom-color: $text-primary;
        color: $text-primary;
    }
    //hover样式

    :deep(.css-dev-only-do-not-override-19iuou).ant-menu-light
        .ant-menu-item:hover:not(.ant-menu-item-selected):not(
            .ant-menu-submenu-selected
        ) {
        color: $text-primary;
    }
    :deep(
            .css-dev-only-do-not-override-19iuou.ant-menu-light.ant-menu-horizontal
                > .ant-menu-item:hover::after
        ) {
        border-bottom-color: $text-primary;
    }

    .navbox {
        height: 80px;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-around;
        margin: 0 0px;
        padding: 5px 20px;

        p {
            margin-bottom: 0px !important;
        }
    }
}

.ant-menu-item-selected {
    color: $text-color-click !important;
}

.right-aligned-item {
    float: right;
    margin-left: auto;
    /* 这将使最后一个li元素自动定位到右侧 */
}

.rightLong {
    width: 80%;
    margin-left: auto;
    /* padding: 0 100px; */
}
</style>
